<template>
  <div class="content">
    <a-descriptions :column="4">
      <a-descriptions-item label="微信昵称">
        {{ userInfo.details.nickName }}
      </a-descriptions-item>
      <a-descriptions-item label="性别">
        {{ userInfo.details.gender | gender }}
      </a-descriptions-item>
      <a-descriptions-item label="生日">
        {{ userInfo.details.birthday }}
      </a-descriptions-item>
      <a-descriptions-item label="手机号">
        {{ userInfo.details.phone }}
      </a-descriptions-item>
    </a-descriptions>
    <a-descriptions :column="2">
      <!-- <a-descriptions-item label="微信支付分"> - </a-descriptions-item> -->
      <a-descriptions-item label="直营卡品牌">
        {{ userInfo.serviceBrand | string2arr }}
      </a-descriptions-item>
      <a-descriptions-item label="经销卡品牌">
        {{ userInfo.dealerBrand | string2arr }}
      </a-descriptions-item>
    </a-descriptions>
    <a-descriptions :column="1" class="personal">
      <a-descriptions-item label="地址">
        <a @click="addAddress"><a-icon type="plus" /> 新增</a>
        <a-list item-layout="horizontal" :data-source="data" class="address-list">
          <a-list-item slot="renderItem" slot-scope="item">
            <p>
              <span class="default">{{ item.logDefault == 1 ? '【默认】' : '' }}</span>
              <span>{{ item.contactName }}</span
              ><a-divider type="vertical" /><span>{{ item.contactPhone }}</span
              ><a-divider type="vertical" /><span>{{ item.province }} {{ item.city }} {{ item.district }} {{ item.address }}</span
              ><span class="btn" style="margin-left: 12px"><a @click="editAddress(item)">修改</a><a-divider type="vertical" /><a @click="delAddress(item.id)">删除</a></span>
              <span style="margin-left: 12px">经销品牌：{{ item.dealerBrands | dealerBrands }} </span>
            </p>
          </a-list-item>
        </a-list>
      </a-descriptions-item>
      <!-- <a-descriptions-item label="标签">
        <a-tag color="blue">
          高消费客户
        </a-tag>
        <a-tag color="blue">
          blue
        </a-tag>
      </a-descriptions-item> -->
      <a-descriptions-item label="备注">
        <a-textarea placeholder="请输入沟通备注" :auto-size="{ minRows: 2, maxRows: 6 }" :maxLength="250" v-model="remark" class="remark" />
        <a-button type="primary" class="save" @click="saveRemark">保存</a-button>
      </a-descriptions-item>
      <a-descriptions-item label="优惠券">
        <div style="display: flex">
          <DiscountModal ref="DiscountModal" :discountList="discountList" :interceptList="interceptList" :type="type"></DiscountModal>
          <a-button type="link" class="save" @click="moreCoupon" v-if="this.disclength > 3">查看更多</a-button>
        </div>
      </a-descriptions-item>
    </a-descriptions>

    <AddressEdit ref="addressModal" @refreshList="refreshList" :unionId="unionId"></AddressEdit>
    <a-divider dashed />
    <div class="files-title">
      <h3>风格档案</h3>
      <span>（用户填写，另外四维信息由后台补充）</span>
    </div>
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @submit="handleSubmit" :form="form">
        <a-row :gutter="48">
          <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
            <a-form-item label="身高(CM)">
              <a-input v-decorator="['height']" name="name" placeholder="请输入" autocomplete="off" />
            </a-form-item>
          </a-col>
          <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
            <a-form-item label="体重(KG)">
              <a-input v-decorator="['weight']" name="name" placeholder="请输入" autocomplete="off" />
            </a-form-item>
          </a-col>
          <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
            <a-form-item label="肤色">
              <a-input v-decorator="['skin']" name="name" placeholder="请输入" autocomplete="off" disabled />
            </a-form-item>
          </a-col>
          <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
            <a-form-item label="身型">
              <a-input v-decorator="['shenxing']" name="name" placeholder="请输入" autocomplete="off" disabled />
            </a-form-item>
          </a-col>
          <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
            <a-form-item label="肩宽(CM)">
              <a-input-number v-decorator="['shoulderWidth']" :min="0" placeholder="请输入" name="name" autocomplete="off" style="width: 100%" />
            </a-form-item>
          </a-col>
          <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
            <a-form-item label="腰围(CM)">
              <a-input-number v-decorator="['waistline']" :min="0" placeholder="请输入" name="name" autocomplete="off" style="width: 100%" />
            </a-form-item>
          </a-col>
          <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
            <a-form-item label="胸围(CM)">
              <a-input-number v-decorator="['bust']" :min="0" placeholder="请输入" name="name" autocomplete="off" style="width: 100%" />
            </a-form-item>
          </a-col>
          <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
            <a-form-item label="臀围(CM)">
              <a-input-number v-decorator="['hipline']" :min="0" placeholder="请输入" name="name" autocomplete="off" style="width: 100%" />
            </a-form-item>
          </a-col>
          <!-- <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
            <a-form-item label="上衣尺码">
              <a-input v-decorator="['shirt']" name="name" placeholder="请输入" autocomplete="off" disabled />
            </a-form-item>
          </a-col>
          <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
            <a-form-item label="下衣尺码">
              <a-input v-decorator="['trousers']" name="name" placeholder="请输入" autocomplete="off" disabled />
            </a-form-item>
          </a-col>
          <a-col :xxl="6" :xl="8" :lg="12" :sm="24">
            <a-form-item label="鞋子尺码">
              <a-input v-decorator="['shoes']" name="name" placeholder="请输入" autocomplete="off" disabled />
            </a-form-item>
          </a-col> -->
          <a-col :lg="12" :sm="24">
            <a-form-item label="穿搭困扰">
              <a-input v-decorator="['diffcult']" name="name" placeholder="请输入" autocomplete="off" disabled />
            </a-form-item>
          </a-col>
          <a-col :lg="12" :sm="24">
            <a-form-item label="风格偏好">
              <a-input v-decorator="['stylesList']" name="name" placeholder="请输入" autocomplete="off" disabled />
            </a-form-item>
          </a-col>
          <a-col :lg="12" :sm="24">
            <a-form-item label="可接受上装版型">
              <a-input v-decorator="['topClothing']" name="name" placeholder="请输入" autocomplete="off" disabled />
            </a-form-item>
          </a-col>
          <a-col :lg="12" :sm="24">
            <a-form-item label="可接受下装版型">
              <a-input v-decorator="['underClothing']" name="name" placeholder="请输入" autocomplete="off" disabled />
            </a-form-item>
          </a-col>
          <!-- <a-col :lg="12" :sm="24">
            <a-form-item label="可接受基础色">
              <a-input v-decorator="['baseColor']" name="name" placeholder="请输入" autocomplete="off" disabled />
            </a-form-item>
          </a-col> -->
          <a-col :lg="12" :sm="24">
            <a-form-item label="不可接受色系">
              <a-input v-decorator="['color']" name="name" placeholder="请输入" autocomplete="off" disabled />
            </a-form-item>
          </a-col>
          <a-col :lg="12" :sm="24">
            <a-form-item label="不想露出的部位">
              <a-input v-decorator="['naked']" name="name" placeholder="请输入" autocomplete="off" disabled />
            </a-form-item>
          </a-col>
          <a-col :lg="12" :sm="24">
            <a-form-item label="不可接受面料">
              <a-input v-decorator="['fabric']" name="name" placeholder="请输入" autocomplete="off" disabled />
            </a-form-item>
          </a-col>
          <a-col :lg="24" :sm="24"> </a-col>
        </a-row>
        <a-form-item label="参考风格">
          <div class="photos" v-for="(item, index) in photos" :key="index">
            <img :src="item" alt="" />
            <span class="action" @click="bigImg(index, photos)">
              <a-icon type="eye" style="color: #fff; fontsize: 16px" />
            </span>
          </div>
        </a-form-item>
        <a-form-item label="生活照（后台）">
          <JImageUpload :uploadParams="getUploadParams()" :isMultiple="true" :number="9" @fileChange="fileChange" v-model="fileList"></JImageUpload>
        </a-form-item>
        <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center; margin-top: 96px">
          <a-button htmlType="submit" type="primary">保存</a-button>
        </a-form-item>
      </a-form>
    </div>
    <BigImg :visibleImgs="visibleImgs" :imgList="bigImgList" :goToIndex="goToIndex" @closeBig="closeBig"></BigImg>
  </div>
</template>
<script>
import { selectLogistics, selectById, delLogisticsById } from '@/api/box/api'
import { vouchersList } from '@/api/box/workbench'
import { saveCustomer } from '@/api/box/member'
import AddressEdit from '@/views/box/components/Address/AddressEdit.vue'
import JImageUpload from '@/components/qiniuUpload/JImageUpload.vue'
import globalData from '@/assets/js/common'
import BigImg from '@/views/box/components/UserMsg/bigImg'
import DiscountModal from '@/views/box/components/discount/DiscountModal'
export default {
  data() {
    return {
      unionId: '',
      addressRules: {
        name: [{ required: true, message: '请输入收货人', trigger: 'blur' }],
        mobile: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
        address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
        details: [{ required: true, message: '请输入联详细地址', trigger: 'blur' }]
      },
      data: [],
      userInfo: {
        details: {},
        customerInfoForAnswer: {}
      },
      shenxingText: '',
      remark: '',
      queryParam: {},
      spinning: true,
      uploadToken: '',
      form: this.$form.createForm(this),
      loading: false,
      headers: {
        authorization: 'authorization-text'
      },
      fileList: [],
      newLifePhotos: [],
      imgBaseUrl: '', // this.$jscommon.uploadImgHost()
      photos: [],
      visibleImgs: false,
      bigImgList: [],
      goToIndex: 0,
      discountList: [],
      interceptList: [],
      disclength: 0,
      type: '1'
    }
  },
  components: {
    AddressEdit,
    JImageUpload,
    BigImg,
    DiscountModal
  },
  filters: {
    string2arr(v) {
      if (v) {
        return v.join('，')
      } else {
        return ''
      }
    },
    dealerBrands(v) {
      if (v.length > 0) {
        return v.join('、')
      } else {
        return '无'
      }
    }
  },
  watch: {},
  created() {
    this.unionId = this.$route.params.id
  },
  mounted() {
    this.fetchUserInfo()
    this.fetchSelectLogistics()
    this.vouchersList() // 查看优惠卷
  },
  beforeRouteLeave(to, from, next) {
    this.$destroy()
    next()
  },
  methods: {
    // 查看更多优惠卷
    moreCoupon() {
      this.$refs.DiscountModal.open()
    },
    // 获取优惠卷信息
    vouchersList() {
      let data = {
        page: {
          pageNo: 1,
          pageSize: 100
        },
        requestData: {
          type: 0,
          unionid: this.unionId
        },
        user_id: this.userInfo.id
      }
      return vouchersList(data)
        .then(res => {
          if (res.code === 0) {
            this.discountList = res.data
            this.disclength = res.data.length
            this.discountList.forEach(ele => {
              ele.startDate = ele.startDate ? ele.startDate.replace(/(\d{4})(\d{2})(\d{2})/, '$1.$2.$3') : ''
              ele.validDate = ele.validDate ? ele.validDate.replace(/(\d{4})(\d{2})(\d{2})/, '$1.$2.$3') : ''
              ele.vouDis = ele.vouDis ? (ele.vouDis * 10).toFixed(1) : ''
              ele.falg = false // 判断箭头方向以及提示
            })
            if (this.discountList && this.discountList.length > 2) {
              this.interceptList = this.discountList.slice(0, 3)
            } else {
              this.interceptList = this.discountList
            }
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log('优惠卷信息：' + err)
        })
    },
    // 获取用户地址
    fetchSelectLogistics() {
      selectLogistics(this.unionId).then(res => {
        if (res.code == 0) {
          if (res.data.length > 0) {
            this.data = res.data
          } else {
            this.data = []
          }
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    // 获取用户信息
    fetchUserInfo() {
      selectById(this.unionId, '').then(res => {
        if (res.code == 0) {
          this.userInfo = res.data
          let shenxing = ''
          if (res.data.details.gender == 0) {
            shenxing = `肩型：${res.data.details.body ? res.data.details.body : '-'} ， 胯部：${res.data.details.bodyFeature ? res.data.details.bodyFeature : '-'} ，腿型：${
              res.data.details.styles ? res.data.details.styles : '-'
            }`
          } else if (res.data.details.gender == 1) {
            shenxing = `肩型：${res.data.details.body ? res.data.details.body : '-'} ， 腹部：${res.data.details.bodyFeature ? res.data.details.bodyFeature : '-'} ， 腿型：${
              res.data.details.styles ? res.data.details.styles : '-'
            }`
          }
          this.shenxingText = shenxing
          let diffcultArr = []
          if (this.userInfo.details.head) {
            diffcultArr.push(this.userInfo.details.head)
          }
          if (this.userInfo.details.gb) {
            diffcultArr.push(this.userInfo.details.gb)
          }
          if (this.userInfo.details.yao) {
            diffcultArr.push(this.userInfo.details.yao)
          }
          if (this.userInfo.details.leg) {
            diffcultArr.push(this.userInfo.details.leg)
          }
          // console.log(diffcultArr)

          this.form.setFieldsValue({
            height: this.userInfo.customerInfoForAnswer.height,
            weight: this.userInfo.customerInfoForAnswer.weight,
            skin: this.userInfo.customerInfoForAnswer.skin,
            shenxing: this.userInfo.customerInfoForAnswer.body ? this.userInfo.customerInfoForAnswer.body : '',
            shoulderWidth: this.userInfo.details.shoulderWidth,
            waistline: this.userInfo.details.waistline,
            bust: this.userInfo.details.bust,
            hipline: this.userInfo.details.hipline,
            // shirt: this.userInfo.details.shirt,
            // trousers: this.userInfo.details.trousers,
            // shoes: this.userInfo.details.shoes,
            diffcult: this.userInfo.customerInfoForAnswer.position ? this.userInfo.customerInfoForAnswer.position : '',
            stylesList: this.userInfo.stylesList ? this.userInfo.stylesList.map(e => e.name).join(',') : '',
            topClothing: this.userInfo.customerInfoForAnswer.onCloth ? this.userInfo.customerInfoForAnswer.onCloth : '',
            underClothing: this.userInfo.customerInfoForAnswer.downCloth ? this.userInfo.customerInfoForAnswer.downCloth : '',
            // baseColor: this.userInfo.details.baseColor ? this.userInfo.details.baseColor : '',
            color: this.userInfo.customerInfoForAnswer.colorNew ? this.userInfo.customerInfoForAnswer.colorNew : '',
            naked: this.userInfo.customerInfoForAnswer.partForNo ? this.userInfo.customerInfoForAnswer.partForNo : '',
            fabric: this.userInfo.customerInfoForAnswer.lining ? this.userInfo.customerInfoForAnswer.lining : ''
          })

          this.photos = this.userInfo.customerInfoForAnswer.other && this.userInfo.customerInfoForAnswer.other.length > 0 ? this.userInfo.customerInfoForAnswer.other : []
          this.fileList = this.userInfo.lifePhotos ? this.userInfo.lifePhotos : []
          this.remark = this.userInfo.details.bgRemark
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    // 新建地址
    addAddress() {
      this.$refs.addressModal.show({})
    },
    // 编辑地址
    editAddress(item) {
      this.$refs.addressModal.show(item)
    },
    delAddress(id) {
      delLogisticsById(id).then(res => {
        if (res.code == 0) {
          this.$message.success('删除成功！')
          this.fetchSelectLogistics()
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    // 刷新地址
    refreshList(value) {
      if (value) {
        this.fetchSelectLogistics()
      }
    },
    // 上传图片
    getUploadParams() {
      return { ...globalData.uploadParams }
    },
    fileChange(list) {
      // console.log(list)
      this.newLifePhotos = list
    },
    // 保存备注
    saveRemark() {
      let data = {
        bgRemark: this.remark,
        id: this.userInfo.details.id
      }
      this.saveInfo(data)
    },
    // 提交表单
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
          let data = {
            bust: values.bust,
            hipline: values.hipline,
            shoulderWidth: values.shoulderWidth,
            waistline: values.waistline,
            id: this.userInfo.details.id,
            lifePhotos: this.newLifePhotos ? this.newLifePhotos.map(e => e.url) : [],
            height: values.height,
            weight: values.weight
            // bgRemark: this.remark
          }
          console.log(data)
          this.saveInfo(data)
        }
      })
    },
    saveInfo(data) {
      let params = {
        requestData: data
      }
      saveCustomer(params).then(res => {
        if (res.code == 0) {
          this.$message.success('保存成功！')
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    // 查看大图
    bigImg(index, list) {
      this.visibleImgs = true
      this.goToIndex = index
      this.bigImgList = list
    },
    // 关闭大图弹窗
    closeBig(value) {
      this.visibleImgs = value
    }
  }
}
</script>
<style lang="less" scoped>
.content {
  .brands {
    margin-right: 4px;
    display: inline-block;
  }
}
.save {
  margin: 0 auto;
  display: block;
}
.personal {
  /deep/ .ant-descriptions-item {
    display: flex;
    align-items: flex-start;
  }
  .address-list {
    min-width: 40vw;
    li {
      padding: 0;
    }
    li:first-child {
      padding-top: 0;
    }
    p {
      margin: 0;
      display: flex;
      align-items: top;
      // justify-content: space-between;
      width: 100%;
      line-height: 36px;
      margin-top: 6px;
      margin-bottom: 6px;
      > span {
        flex: 0 0 auto;
      }
      .default {
        color: #1890ff;
        display: block;
        width: 60px;
      }
      .btn {
        margin-left: 12px;
      }
      > .ant-divider,
      > .ant-divider-vertical {
        margin-top: 12px;
      }
    }
  }
  .remark {
    width: 40vw;
  }
  .save {
    display: inline-block;
    margin-left: 12px;
  }
}

.files-title {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  h3 {
    margin: 0;
  }
}
.hidden-label {
  /deep/ .ant-form-item-label {
    visibility: hidden;
  }
}
.table-page-search-wrapper /deep/.ant-form-item-label {
  width: 120px;
}
.photos {
  width: 104px;
  height: 104px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  box-sizing: border-box;
  margin: 0 8px 8px 0;
  padding: 8px;
  float: left;
  position: relative;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
  }
  .action {
    position: absolute;
    z-index: 1;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: all 0.3s;
    left: 0;
    top: 0;
    margin: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
}
.photos:hover {
  .action {
    opacity: 1;
  }
}
</style>

